<template>
  <div class="">
    <div class="radiobox">
      <div class="">
        <div class="card_label">
          <div v-if="requireFlag" class="require_icon">*</div>

          <div class="label_txt">{{ label }}：</div>
        </div>
        <div class="card_select">
          <div class="select_time" @click="handleSelectTime">
            <div class="time_val">{{ time ? time : '请选择' }}</div>
            <i class="iconfont icon-right"></i>
          </div>
        </div>
      </div>
    </div>
    <!-- 时间选择弹窗 -->
    <van-popup v-model="showTimerPicker" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        :type="type"
        @confirm="onTimeConfirm($event)"
        @cancel="showTimerPicker = false"
        :formatter="formatter"
        :max-date="maxDate"
        :min-date="minDate"
      />
    </van-popup>
  </div>
</template>

<script>
import { getCurrentDetailMin } from '@/utils/util.js'
import { Toast } from 'vant'

export default {
  name: 'SelectTime',
  components: {},
  props: {
    label: {
      type: String,
      default: null,
    },
    field: {
      type: String,
      default: null,
    },

    requireFlag: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: 'datetime',
    },
    dateMax: {
      type: Date,
      default: null,
    },
  },
  data() {
    return {
      showTimerPicker: false,
      time: '',
      currentDate: new Date(),
      maxDate: '',
      minDate: '',
    }
  },
  watch: {
    // initVal(val, oldValue) {
    //   console.log(val)
    //   if (val) {
    //   }
    // },
  },
  mounted() {
    if (this.field == 'followDate') {
      this.time = getCurrentDetailMin()
    }
  },

  methods: {
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      } else if (type === 'hour') {
        return `${value}时`
      } else if (type === 'minute') {
        return `${value}分`
      }

      return value
    },
    handleSelectTime() {
      if (this.disabled) {
        if (this.field == 'followDate') {
          Toast('跟进时间为系统默认无法更改')
        }
        return
      }
      if (this.field == 'followDate') {
        this.minDate = new Date()
        this.getCurTime()
      } else if (this.field == 'nextFollowDate') {
        this.minDate = this.getTomorrow()
        this.maxDate = !!this.dateMax ? this.dateMax : new Date(this.getThreeMonthsLaterDate(3))
      } else if (this.field == 'bookingInDate') {
        this.minDate = new Date()
        this.maxDate = new Date(this.getThreeMonthsLaterDate(1))
      } else {
        this.minDate = new Date()
        this.maxDate = new Date(2030, 11, 30, 23, 59)
      }
      this.showTimerPicker = true
    },

    getThreeMonthsLaterDate(num) {
      const now = new Date()
      // 使用setMonth()方法，需要注意的是setMonth()函数会把日期设置到当月的最后一天
      // 如果当前日期加上三个月超过了实际月份的最后一天，它会自动调整到那个月的最后一天
      now.setMonth(now.getMonth() + num)
      return now
    },
    getTomorrow() {
      const today = new Date()
      today.setDate(today.getDate() + 1) // 将日期设置为明天
      return today
    },

    onTimeConfirm(val) {
      let year = val.getFullYear()
      let month = val.getMonth() + 1
      let day = val.getDate()
      let hour = val.getHours()
      let minute = val.getMinutes()
      // let second = val.getSeconds()
      if (month >= 1 && month <= 9) {
        month = `0${month}`
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`
      }
      if (hour >= 0 && hour <= 9) {
        hour = `0${hour}`
      }
      if (minute >= 0 && minute <= 9) {
        minute = `0${minute}`
      }
      // if (second >= 0 && second <= 9) { second = `0${second}` }

      if (this.field == 'nextFollowDate') {
        this.time = `${year}-${month}-${day}`
      } else {
        this.time = `${year}-${month}-${day} ${hour}:${minute}`
      }
      // this.formData[this.timeField] = `${year}-${month}-${day} ${hour}:${minute}`
      this.$emit('getFieldVal', this.field, this.time)
      this.showTimerPicker = false
    },
    getCurTime() {
      let currentDate = new Date()
      this.maxDate = new Date(
        currentDate.getFullYear(),
        currentDate.getMonth(),
        new Date(currentDate.getFullYear(), currentDate.getMonth(), 0).getDate(),
        23,
        59
      )
    },
  },
}
</script>

<style lang="less" scoped>
.followInfo {
  position: fixed;
  width: 100%;
  height: 70vh;
  overflow: auto;
  bottom: 0;
  left: 0;
  z-index: 10;
  box-shadow: 0px 1px 0px 0px rgba(40, 47, 56, 0.04);
  border-radius: 10px 10px 0px 0px;
  background: #fff;
  .followInfo_title {
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid #f2f2f2;
  }
}
.radiobox {
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.02);
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #f4f4f6;
  padding: 8px 17px 20px 17px;
  .card_label {
    display: flex;
    margin-bottom: 10px;
    .require_icon {
      font-weight: 400;
      font-size: 12px;
      color: #ff4848;
    }
    .label_txt {
      font-weight: 400;
      font-size: 12px;
      color: #86909c;
    }
  }
  .card_select {
    display: flex;
    flex-wrap: wrap;
    .radio_item {
      width: 33%;
      display: flex;
      align-items: center;
      .item_icon {
        width: 18px;
        display: block;
        margin-right: 10px;
      }
      .item_name {
        font-weight: 600;
        font-size: 12px;
        color: #2f2f2f;
      }
    }
    .select_time {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .time_val {
        font-weight: 700;
        font-size: 12px;
        color: #2f2f2f;
      }
      .icon-right {
        font-size: 16px;
        color: #c9cdd4;
      }
    }
  }
}
</style>
